<template>
  <div class="CustomeInfo">

      <div class="weui-cells TotalCustome">
            <div class="weui-cell">
                <div class="weui-cell__hd"><img src="../../static/img/main.png" alt="" style="width:40px;margin-right:16px;display:block"></div>
                <div class="weui-cell__bd">
                    <p>{{typeName}}</p>
                </div>
                <div class="weui-cell__ft" style="color: #1e96eb;">{{TotalCustome}}(人)</div>
            </div>
          
      </div>

     <!--mescroll滚动区域的基本结构-->
     <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
      <!--内容...-->
       <ul id="dataList" class="data-list">
           
           <div class="weui-cells custome_weui-cells">

            <div class="weui-cell" v-for="(item, index) in dataList" :key="index">
                <div class="weui-cell__hd">
                  <img v-lazy="item.image"  style="width:45px;margin-right:15px;display:block;border-radius:50%;">
                </div>

                <div class="weui-cell__bd">
                    <p>{{item.name}}</p>
                </div>
                <div class="weui-cell__ft"></div>
            </div>
        </div>

       </ul>
     </mescroll-vue>
    
    	<div class="float-action-button" @click="openSearch()"  v-drag draggable="true" id="divmove" onclock="moveToY(1)">
        <span class="icon iconfont icon-sousuo2 customsousuo" ></span>
      </div>


     <popup v-model="show" position="bottom" max-height="50%">
        <div style="padding-top:10px;">
         <popup-picker :title="valueTitle" :data="list" v-model="valueType" @on-show="onShow" @on-hide="onHide" @on-change="onChange"></popup-picker>
      </div>

      <div style="padding: 15px;">
        <x-button
          style="border-radius:20px;"
          @click.native="ToSearch()"
          :gradients="['#1D62F0', '#19D5FD']"
        >查询</x-button>
      </div>

     </popup>

  </div>
</template>

<script>
import { bridge } from "../../src/assets/common/js/dsbridge";
import { Toast, Confirm ,Cell,Group,Popup, XButton,Loading,PopupPicker,Divider} from "vux";
import MescrollVue from "mescroll.js/mescroll.vue";
import VueLazyload from 'vue-lazyload'

export default {
  name: "CustomeInfo",
  data() {
    return {
      show:false,
      type:0, //0:全部 1：员工  2：访客
      typeName:'总人数(员工/访客)',
      TotalCustome:'0',
      title: "员工与访客",
      valueTitle:'角色选择',
      mescroll: null, // mescroll实例对象
      mescrollDown: {}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
      mescrollUp: {
        // 上拉加载的配置.
        callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); }
        //以下是一些常用的配置,当然不写也可以的.
        page: {
          num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
          size: 8 //每页数据条数,默认10
        },
        //支持自定义没有更多数据
        htmlNodata: '<p class="upwarp-nodata">亲,没有更多数据了~</p>',
        noMoreSize: 5, //如果列表已无数据,可设置列表总数大于5才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
        toTop: {
          //回到顶部按钮
          src: "./static/img/mescroll-totop.png", //图片路径,默认null,支持网络图
          offset: 8 //列表滚动1000px才显示回到顶部按钮
        },
        empty: {
          //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
          warpId: "dataList", //父布局的id (1.3.5版本支持传入dom元素)
          icon: "./static/img/mescroll-empty.png", //图标,默认null,支持网络图
          tip: "暂无相关数据~" //提示
        }
      },
      dataList: [], // 列表数据,
      //角色类型
      list: [['全部', '员工', '访客']],
      valueType:['全部']

    };
  },

  components: {
    MescrollVue,
    Toast,
    Confirm,
    Cell,
    Group,
    Popup,
    XButton,
    Loading,
    PopupPicker,
    Divider 
  },
  mounted() {
     //获取总人数
     let Count = bridge.call("getCustomeCount",this.type) || null;
     this.TotalCustome=Count;
  },

  methods: {
     // mescroll组件初始化的回调,可获取到mescroll对象 (如果this.mescroll并没有使用到,可不用写mescrollInit)
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
    upCallback(page, mescroll) {
      let self=this;
      request(self,page,mescroll);
    },

    //展开查询
    openSearch() {
      this.show = !this.show;
    },
    //搜索按钮
    ToSearch() {
      let self = this;
      console.log(self.valueType);
      if(self.valueType.indexOf("全部")!=-1){
         self.type=0;
         self.typeName="总人数(员工/访客)"
      }

       if(self.valueType.indexOf("员工")!=-1){
            self.type=1;
            self.typeName="员工总人数"
       }

       if(self.valueType.indexOf("访客")!=-1){
            self.type=2;
            self.typeName="访客总人数"
       }

      //先清空 
      self.dataList=[];   
      self.mescroll.triggerDownScroll();
    },
    //改变
    onChange (val) {
       console.log(val)
       this.valueType=val;
    },
    //显示
    onShow () {
      console.log('on show')
    },
    //隐藏
    onHide (type) {
      console.log('on hide', type)
    }

  },

  created() {

  },

  activated() {}
};

 //请求数据
let request = (self,page,mescroll) => {
    //从数据库获取请求数据
      let params = {
        page: page.num, // 页码
        rows: page.size, // 每页长度
        data: {
           type: self.type  // 0:表示全部  1:表示员工  2:表示访客
        }
      }

      console.log(params);
      self.$vux.loading.show({
          text: 'Loading',
          position: "center"
      })
      //查询总数
      let Count = bridge.call("getCustomeCount",self.type) || null;
      self.TotalCustome=Count;

      let result = bridge.call("getAllCustomeList", JSON.stringify(params)) || null;
      setTimeout(() => {
        if (result != null) {
          // 请求的列表数据
          let arr = JSON.parse(result);
          console.log(arr);
          self.show = false;
          // 如果是第一页需手动制空列表
          if (page.num === 1) self.dataList = [];
          // 把请求到的数据添加到列表
          self.dataList = self.dataList.concat(arr);
          // 数据渲染成功后,隐藏下拉刷新的状态
          self.$nextTick(() => {
             self.$vux.loading.hide()
             mescroll.endSuccess(arr.length);
          });
        } else {
          self.show = false;
          self.$vux.loading.hide()
          self.$nextTick(() => {
            mescroll.endSuccess(0);
          });
         
        }
      }, 500);
}

</script>


<style scoped>
.CustomeInfo {
  height: 100%;
  width: 100%;
}

.CustomeInfo .float-action-button {
  position: fixed;
  width: 55px;
  height: 55px;
  right: 10px;
  bottom: 10px;
  cursor: pointer;
  background-color: #1a97f1;
  color: #f2f1ef;
  border-radius: 50%;
  border: 1px solid #1a97f1;
  box-shadow: 0px 3px 9px 2px #bfbfbf;
  z-index: 150;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.CustomeInfo .float-action-button .customsousuo{
    font-size: 28px;
    top: 7px;
    position: relative;
    left: 14px;
}

/*以fixed的方式固定mescroll的高度*/
.CustomeInfo .mescroll {
  position: fixed;
  z-index: 100;
  top:50px;
  bottom: 0;
  height: auto;
}

.CustomeInfo .custome_weui-cells{
  line-height: 2.5;
}

.CustomeInfo .TotalCustome{
    top: 0;
    margin-top: 0;
    position: fixed;
    width: 100%;
}
</style>